<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精彩图集</title>
    <link rel="stylesheet" href="/css/mobile/index.css">
    <!-- 重置默认样式 -->
    <link rel="stylesheet" href="/css/resetcss.css">

    <style>
        .image-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 10px;
            box-sizing: border-box;
        }
        
        .image-item {
            width: 48%;  /* 留4%的间隙 (100% - 48%*2 = 4%) */
            margin-bottom: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            border-radius: 5px;
            overflow: hidden;
        }
        
        .image-item img {
            width: 100%;
            height: auto;
            display: block;
        }

        .button {
            display: flex;
            justify-content: space-around; /* 或 space-between */
            align-items: center;
            width: 100%;
            padding: 10px 0;
            background-color: #f5f5f5;
            border-radius: 8px;
            margin: 10px 0;
        }
        
        .button p {
            flex: 1; /* 平均分配宽度 */
            text-align: center;
            padding: 8px 5px;
            margin: 0 5px;
            background-color: #fff;
            border-radius: 6px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            color: #333;
            font-size: 14px;
        }
        
        /* 点击效果 */
        .button p:active {
            background-color: #e0e0e0;
            transform: scale(0.98);
        }
        
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="navbar-container">
            <div class="nav-item active">
                <a href="#" class="nav-home">
                    <i class="fas fa-home"></i>
                    <span>主页</span>
                </a>
            </div>
            <div class="nav-item">
                <a href="#" class="nav-life">
                    <i class="fas fa-camera"></i>
                    <span>生活瞬间</span>
                </a>
            </div>
            <div class="nav-item">
                <a href="#" class="nav-tour">
                    <i class="fas fa-plane"></i>
                    <span>旅行记录</span>
                </a>
            </div>
            <div class="nav-item">
                <a href="#" class="nav-atlas">
                    <i class="fas fa-images"></i>
                    <span>精彩图集</span>
                </a>
            </div>
            <div class="nav-item">
                <a href="#" class="nav-center">
                    <i class="fas fa-user"></i>
                    <span>个人中心</span>
                </a>
            </div>
        </div>
    </nav>

    <!-- 未来搜索框 -->
    <div class="search">
        
    </div>

    <!-- 未来搜索框 -->
    <div class="button">
        <p class="submit-addimg">添加图片</p>
        <p class="submit-deleteimg">删除图片</p>
        <p class="submit-deleteatlas">删除图集</p>
    </div>

    <!-- 标题区域 -->
    <div class="title">
        <h1></h1>
        <h3></h3>
    </div>
    
    <!-- 内容区域 -->
    <div class="content">
        <div class="image-container">
        </div>
    </div>
</body>


<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<script src="/configfile/config.js"></script>
<script type="module">

	//window.__ENV__   这样来读取env环境变量里面公开出来的变量

	//获取导航的a标签，并设置href
	const navhome = document.querySelector('.nav-home'); // 返回第一个匹配的节点
	const navlife = document.querySelector('.nav-life'); // 返回第一个匹配的节点
	const navatlas = document.querySelector('.nav-atlas'); // 返回第一个匹配的节点
	const navcenter = document.querySelector('.nav-center');//获取个人中心DOM


	let server_ip = window.__ENV__.SERVER_IP;//服务器ip
	let home_ip = window.__ENV__.HOME_SERVER_IP;//首页ip
	navhome.href = home_ip;
	let life_ip = window.__ENV__.LIFEMOMENT_SERVER_IP;//生活瞬间
	navlife.href = life_ip;
	let atlas_ip = window.__ENV__.ATLAS_SERVER_IP;//图片集
	navatlas.href = atlas_ip;
	let user_ip = window.__ENV__.USER_SERVER_IP;//用户
    navcenter.href = user_ip;

	//获取令牌
	let token = localStorage.getItem("token");

    //使用ejs模版来返回数据
    let resultData = <%- JSON.stringify(json) %>;

    // 简单的导航栏交互效果
    document.querySelectorAll('.nav-item').forEach(item => {
        item.addEventListener('click', function() {
            document.querySelector('.nav-item.active').classList.remove('active');
            this.classList.add('active');
        });
    });
    
    //赋值数据
    (function(){
        let imagecontainer = document.querySelector(".image-container");
        let titleh1 = document.querySelector(".title h1");
        let titleh3 = document.querySelector(".title h3");

        titleh1.textContent = resultData.Atlasname;
        titleh3.textContent = resultData.Atlasmessage;

        resultData.Atlasimgs.forEach(data=>{
            let div = document.createElement("div");
            div.className = "image-item";
            let img = document.createElement("img");
            img.src = server_ip + "/" + data.imgurl;
            img.alt = data.imgname;
            div.appendChild(img);
            imagecontainer.appendChild(div);
        });
    })();

    //三个操作按钮
    (function (){
        let submitaddimg = document.querySelector(".submit-addimg");
        let submitdeleteimg = document.querySelector(".submit-deleteimg");
        let submitdeleteatlas = document.querySelector(".submit-deleteatlas");
        
        //删除图片
        submitdeleteimg.addEventListener("click", ()=>{
            axios
                .post(
                    atlas_ip + "/gettempcode",
                    {},
                    {
                        headers: {
                            "Authorization": `Bearer ${token}`
                        }
                    }
                )
                .then((res) => {
                    //判断后端的报错信息。如果存在则保存失败
                    // console.log(res.data);
                    let tempToken = res.data.tempToken;
                    //跳转新页面
                    let href = `${atlas_ip}/deleteimg${resultData.Atlas_id}`;
                    window.location.href = `${href}?tempToken=${tempToken}`;
                })
                .catch(err => {
                    console.log(err);
                    alert("拒绝访问");
                });
        });
        //添加图片
        submitaddimg.addEventListener("click", ()=>{
            axios
                .post(
                    atlas_ip + "/gettempcode",
                    {},
                    {
                        headers: {
                            "Authorization": `Bearer ${token}`
                        }
                    }
                )
                .then((res) => {
                    //判断后端的报错信息。如果存在则保存失败
                    // console.log(res.data);
                    let tempToken = res.data.tempToken;
                    //跳转新页面
                    let href = `${atlas_ip}/addimg${resultData.Atlas_id}`;
                    window.location.href = `${href}?tempToken=${tempToken}`;
                })
                .catch(err => {
                    console.log(err);
                    alert("拒绝访问");
                });
        });
        //删除图集
        submitdeleteatlas.addEventListener("click", ()=>{
            let deleteData = {
                Atlas_id: resultData.Atlas_id
            }
            axios
                .post(
                    atlas_ip + "/deleteatlas",
                    deleteData,
                    {
                        headers: {
                            "Authorization": `Bearer ${token}`
                        }
                    }
                )
                .then((res) => {
                    //判断后端的报错信息。如果存在则保存失败
                    console.log(res.data);
                    if(res.data.message.success){
                        alert("删除成功");
                        window.location.href = atlas_ip
                    }else{
                        alert("删除失败");
                    }
                })
                .catch(err => {
                    console.log(err);
                    alert("拒绝访问");
                });
        });

    })();

</script>
</html>